<script setup lang='ts'>
import {onMounted, ref} from 'vue'
import * as echarts from 'echarts'
    const charts = ref<any>()
    onMounted(() => {
        // 获取echarts实例
        // console.log(charts.value);
        const mycharts = echarts.init(charts.value)
        mycharts.setOption({
            title: {
                text: '男女比例',
                textStyle: {
                    color: 'skyblue'
                },
                left: '40%',
            },
            // x轴组件
            xAxis: {
                show: false,
                min: 0,
                max: 100
            },
            yAxis: {
                show: false,
                type: 'category'
            },
            series: [
                {
                    type: 'bar',
                    data: [58],
                    barWidth: 20,
                    z: 100,
                    itemStyle: {
                        color: 'skyblue',
                        borderRadius: 20
                    }
                },
                {
                    type: 'bar',
                    data: [100],
                    barWidth: 20,
                    barGap: '-100%',
                    itemStyle: {
                        color: 'pink',
                        borderRadius: 20
                    }
                }
            ],
            // 布局组件
            grid: {
                left: 0,
                right: 0,
                bottom: 0,
                top: 0
            }
        })
    })
</script>


<template>
    <div class="box2">
        <div class="title">
            <Title title="男女比例"></Title>
        </div>
        <div class="sex">
            <div class="man">
                <img src="@/views/screen/images/man.png" alt="">
            </div>
            <div class="woman">
                <img src="@/views/screen/images/woman.png" alt="">
            </div>
        </div>
        <div class="scale">
            <p>男士58%</p>
            <p>女士42%</p>
        </div>
        <div ref="charts" class="charts"></div>
    </div>
</template>


<style scoped lang='scss'>
    .box2{
        width: 100%;
        height: 100%;
        background: url('@/views/screen/images/dataScreen-main-cb.png') no-repeat;
        background-size: 100% 100%;
        margin: 20px 0;
        .title{
            margin-left: 20px;
        }
        .sex{
            display: flex;
            justify-content: center;
            .man{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 111px;
                height: 115px;
                background: url('@/views/screen/images/man-bg.png') no-repeat;
                margin: 20px;
            }
            .woman{
                display: flex;
                justify-content: center;
                align-items: center;
                width: 111px;
                height: 115px;
                background: url('@/views/screen/images/woman-bg.png') no-repeat;
                margin: 20px;
            }
        }
        .scale{
            display: flex;
            justify-content: space-between;
        }
        .charts{
            height: 100px;
        }
    }
</style>